<template>
  <div>
    <el-dialog :title="edit_main_title" append-to-body v-dialogDrag :visible.sync="edit_flag"
               @open="handleOpenConfig" :before-close="handleClose" width="80%">
      <el-row type="flex" justify="space-between" style="padding: 10px 0">
        <el-col>
          <el-input style="width: 180px" v-model="page.condition.vin" @keyup.enter.native="search" placeholder="车架号"></el-input>
          <el-button type="primary" style="margin-left: 10px;" @click="search">查询</el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary"
                      @click="statusChangeBtn('delete')">删除
          </el-button>
        </el-col>
        <el-col style="text-align: right">
          <el-button type="primary" @click="handleShipping('10')">返厂维修</el-button>
          <el-button type="primary" @click="handleShipping('50')">处理关闭</el-button>
          <el-button type="primary" @click="handleShipping('40')">带伤发运</el-button>
          <el-button type="primary" @click="handleShipping('60')">发运驳回</el-button>
        </el-col>
      </el-row>
      <!--table列表-->
      <el-table :data="table_data" ref="mainTable"
                header-row-class-name="table-header-center"
                border element-loading-text="正在加载中..." v-loading="false"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40" fixed="left"></el-table-column>
        <!--<el-table-column type="index" label="序号" width="60"></el-table-column>-->
        <el-table-column prop="taskNode" label="异常分类" width="100">
          <template slot-scope="scope">
            {{scope.row.taskNode | exceptionTaskNodeFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="dealType" label="处理方式" width="100">
          <template slot-scope="scope">
            {{scope.row.dealType | exceptionDealTypeFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="exDescribe" label="异常描述" width="200"></el-table-column>
        <el-table-column prop="picUrl" label="图片" width="100">
          <template slot-scope="scope">
            <span @click="handleImgPreview(scope.row)" style="color: #409EFF; font-size: 12px;">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="registerUser" label="登记人"></el-table-column>
        <el-table-column prop="userModified" label="处理人"></el-table-column>
        <el-table-column prop="registerTime" label="登记时间" width="140"></el-table-column>
        <el-table-column prop="dealResultDesc" label="处理结果"  width="140" ></el-table-column>
        <el-table-column prop="remarks" label="异常备注" width="250"></el-table-column>
      </el-table>
      <!--<el-row type="flex" justify="end">-->
        <!--<el-button type="primary" @click="handleClose">取消</el-button>-->
        <!--<el-button type="primary" @click="confirmClick">确定</el-button>-->
      <!--</el-row>-->
      <div style="height:20px"></div>
    </el-dialog>
    <!--查看图片-->
    <el-dialog title="异常图片" append-to-body v-dialogDrag :visible.sync="img_preview_flag" :before-close="imgPreviewHandleClose">
      <span>{{img_preview_select_row.exDescribe}}</span>
      <div style="width: 80%; margin: 10px auto">
        <img :src="img_preview_select_row.picUrl" alt="" style="width: 100%" >
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import * as ExceptionAPI from '@/api/pick/exception'
  export default {
    name: '',
    components: {
    },
    props: ['edit_flag', 'edit_main_title', 'edit_select_row', 'edit_params'],
    data() {
      return {
        title_data: {},
        selectRow: [],
        page: {
          current: 1,
          size: 10,
          total: 1,
          condition: {
            vin: null
          }
        },
        img_preview_flag: false,
        img_preview_select_row: {},
        table_data: []
      }
    },
    created() {
    },
    methods: {
      // 弹窗页面打开时开始执行的方法
      handleOpenConfig() {
        let now_vin = null
        if (this.edit_select_row) {
          const { vin } = this.edit_select_row
          now_vin = vin
        }
        this.page = {
          current: 1,
          size: 10,
          total: 1,
          condition: {
            vin: now_vin
          }
        }
        this.table_data = []
        if (this.edit_select_row) {
          this.search()
        }
      },
      // 状态 修改
      statusChangeBtn(val) {
        const that = this
        if (that.checkSelect(that.selectRow)) {
          let apiName = ''
          let msgVal = ''
          if (val === 'delete') {
            apiName = 'deleteException'
            msgVal = '删除'
          }
          console.log('this.selectRow', that.selectRow)
          const ids = []
          that.selectRow.map(item => {
            ids.push(item.id)
          })
          that.$prompt('请输入删除的原因', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPlaceholder: '请输入删除原因',
            inputPattern: /\s*\S+?/,
            inputErrorMessage: '请输入删除原因'
          }).then(({ value }) => {
            ExceptionAPI[apiName]({ ids: ids.length > 1 ? ids.join(',') : ids[0], remark: value }).then(res => {
              that.$message({
                message: msgVal + '成功',
                type: 'success',
                duration: 2000
              })
              that.search()
            }).catch(err => {
              console.log('error', err)
            })
          }).catch(() => {
            that.$message({
              type: 'info',
              message: '取消输入'
            })
          })
        }
      },
      // 发运处理
      handleShipping(str) {
        if (this.checkSelect(this.selectRow)) {
          const ids = []
          const pictureIds = []
          for (let c = 0; c < this.selectRow.length; c++) {
            ids.push(this.selectRow[c].id)
            pictureIds.push(this.selectRow[c].pictureId)
          }
          console.log('this.$store.getters.currentStorehouse.id', this.$store.getters.currentStorehouse.id)
          // dealType 处理方式: 10 返厂维修，20 出库维修，30 库内维修， 40 带伤发运，50 异常关闭，60 驳回发运
          const toParams = {
            vin: this.page.condition.vin,
            ids, dealType: str,
            pictureId: pictureIds.length > 1 ? pictureIds.join(',') : pictureIds[0],
            houseId: this.$store.getters.currentStorehouse.id
          }
          ExceptionAPI.exceptionHandling(toParams).then(res => {
            this.$message({
              message: '处理方式修改成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          }).catch(err => {
            console.log('错误', err)
          })
        }
      },
      // 查看图片
      handleImgPreview(row) {
        this.img_preview_flag = true
        this.img_preview_select_row = row
      },
      // 关闭图片预览弹窗
      imgPreviewHandleClose() {
        this.img_preview_flag = false
      },
      // 查询
      search() {
        this.page.current = 1
        this.page.size = 10
        this.getList()
      },
      // 获取table列表
      getList() {
        const that = this
        ExceptionAPI.getExceptionDetail(that.page).then(res => {
          const t = res.data
          that.table_data = t.records
          that.page.current = t.current
          that.page.size = t.size
          that.page.total = t.total
        }).catch(err => {
          console.log('错误', err)
        })
      },
      // 检查是否选择单条
      checkSelect(data) {
        const l = data.length
        if (l === 0) {
          this.$message({
            message: '未选择',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      // 当表格的checkbox改变时
      handleSelectionChange(val) {
        this.selectRow = val
      },
      confirmClick() {
        this.$emit('edit-close', false)
      },
      handleClose() {
        this.$emit('edit-close', false)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
